<template>
  <div style="padding: 20px 40px">
    <el-divider content-position="left">详情</el-divider>
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span>基本详情</span>
        </div>
      </template>
      <div style="padding: 0 50px">
        <div style="display: flex; margin-bottom: 20px">
          <div style="text-align: center; width: 50%">报修设备SN</div>
          <div style="text-align: center; width: 50%">78910</div>
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div style="text-align: center; width: 50%">报修人</div>
          <div style="text-align: center; width: 50%">
            %E6%95%85%E4%BA%8B%E4%BC%9A
          </div>
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div style="text-align: center; width: 50%">报修详情</div>
          <div style="text-align: center; width: 50%">突然断电</div>
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div style="text-align: center; width: 50%">报修时间</div>
          <div style="text-align: center; width: 50%">2020-08-19 11:10:12</div>
        </div>
      </div>
    </el-card>

    <el-card style="max-width: 100%; margin-top: 40px">
      <template #header>
        <div class="card-header">
          <span>已回复信息</span>
        </div>
      </template>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="回复标题" width="">
            <template #default="scope">离线</template>
          </el-table-column>
          <el-table-column label="回复内容" width="">
            <template #default="scope">在线</template>
          </el-table-column>
          <el-table-column label="回复时间" width="">
            <template #default="scope">2016-05-03</template>
          </el-table-column>
        </el-table>
        <pagination
          @pagination="storeDeviceList"
          v-model:total="assignableFilt.pages.total"
          v-model:page="assignableFilt.pages.current"
          v-model:limit="assignableFilt.pages.size"
        />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter(); // 获取路由实例
import { ElTable } from "element-plus";
import StoreDeviceApi, {
  FencesPageQuery,
  assignableFiltQuery,
  DeviceForm,
  storeSelectList,
} from "@/api/storeDevice";

interface User {
  date: string;
  name: string;
  address: string;
}
let input = ref();
let value = ref();
let assignableFilt = reactive<assignableFiltQuery>({
  pages: {
    current: 1,
    size: 10,
    total: 0,
    startTime: "",
    endTime: "",
    orders: [
      {
        column: "",
        asc: true,
      },
    ],
  },
  deviceTypeId: undefined,
  deviceCode: undefined,
  btCode: undefined,
  deviceName: undefined,
});

const tableData: User[] = [];

function storeDeviceList() {}
// 新增设备

const dialogVisible = ref(false);
function Reply() {
  dialogVisible.value = true;
}
// 跳转控制页面
function ToBms() {
  router.push("/bmscontrol/index");
}

// 删除

function Delete() {
  ElMessageBox.confirm("是否删除订单?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "custom-message-box",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}

// 设置已处理
function setup() {
  ElMessageBox.confirm("此操作将设置该故障报修为已处理, 是否继续?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "custom-message-box",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "支付成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消设置",
      });
    });
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.custom-message-box .el-message-box__message {
  font-size: 18px;
  width: 800px;
}
</style>
